<template>
  <div>

    <el-input
      v-if="!fieldArguments.suggest"
      :type="fieldArguments.type"
      :style="fieldArguments.style"
      autocomplete="off"
      size="mini"
      clearable
      :clearable="fieldArguments.clearable?fieldArguments.clearable:true"
      v-model="child_defaultValue"
      :placeholder="fieldArguments.placeholder"
      @blur="onChange($event.target.value)"
      @clear="onChange('')"
      >
    </el-input>
    <el-autocomplete
      v-else
      class="inline-input"
      v-model="child_defaultValue"
      :fetch-suggestions="querySearch"
      :placeholder="fieldArguments.placeholder"
      :trigger-on-focus="false"
      :clearable="fieldArguments.clearable?fieldArguments.clearable:true"
      @select="handleSelectTest"
      @blur="onChange($event.target.value)"
      @clear="onChange('')"
    ></el-autocomplete>
  </div>
</template>
<script>
  import Common from './js/Common'
  
  export default {
    name: 'sls-input',
    mixins:[Common],
    data () {
      return {
        inital_defaultValue:'',
        child_defaultValue:'',
      }
    },

    computed: {},
    methods: {
      handleSelectTest(item){
        const self = this;
        self.defaultValue = item.value;
        if(self.fieldArguments.valueKey){
          this.$emit('onChange', {field:self.field,value:item[self.fieldArguments.valueKey]})
        }else{
          this.$emit('onChange', {field:self.field,value:item[self.field.key]})
        };

      },
      querySearch(queryString, cb) {
        const self = this;
        this.$emit('onChange', {field:self.field,value:queryString,func:self.fieldArguments.querySearch,callbak:cb})
      },

    },

  }
</script>
